<template>
  <el-row :gutter="20">
    <el-col :span="16" :offset="4">
      <div style="margin-top: 100px; padding: 40px; border: 1px solid #f8f8f8; border-radius: 8px; box-shadow: 0 0 8px #8c939d;">
        <h2 style="text-align:center;">我的</h2>
        <p>
          <el-button type="primary" @click="dialogVisible = true; ruleForm={userId: $store.state.user.id,}">添加</el-button>
        </p>
        <ul>
          <li v-for="item in list" style="margin-bottom: 20px;">
            {{item.title}}
            <el-button type="warning" @click="dialogVisible = true; ruleForm=item" size="mini">修改</el-button>
            <el-button type="danger" size="mini" @click="deleteArticle(item.id)">删除</el-button>
          </li>
        </ul>
      </div>

      <el-dialog
          title="发布新博文"
          :visible.sync="dialogVisible"
          width="90%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input v-model="ruleForm.content" type="textarea" rows="5"></el-input>
          </el-form-item>
          <el-form-item label="栏目" prop="tag">
            <el-select v-model="ruleForm.tag">
              <el-option v-for="item in categoryList" :label="item.title" :value="item.title"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </span>
      </el-dialog>
    </el-col>
  </el-row>

</template>

<script>
import axios from "axios";

export default {
  name: "User",
  data() {
    return {
      dialogVisible: false,
      categoryList: [],
      list: [],
      ruleForm: {
        userId: this.$store.state.user.id,
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ],
        tag: [
          { required: true, message: '请选择栏目', trigger: 'blur' },
        ],
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      axios.get("/category/").then(res=>{
        this.categoryList = res.data;
      })
      axios.get("/article/page?orderById=true&userId=" + this.$store.state.user.id).then(res=>{
        this.list = res.data.records;
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = false
          let vm = this;
          axios.post("/article/", this.ruleForm).then(res => {
            vm.$message.success('操作成功');
            this.getData();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    deleteArticle(id) {
      this.$confirm('确认删除？')
          .then(_ => {
            axios.delete("/article/" + id).then(res=>{
              this.$message.success('操作成功');
              this.getData();
            })
          })
          .catch(_ => {});
    }


  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>